---
title: EntityRenderer 实体渲染器
icon: Component
relatedFile: app/src/core/render/canvas2d/entityRenderer/EntityRenderer.tsx
---

这个服务用于处理节点相关的绘制。

它负责协调舞台上各种类型对象的渲染，包括区域、文本节点、图像节点、连接点、URL 节点、笔画、传送门节点和 SVG 节点。它还管理区域的背景元素和标题的渲染，以及实体的详细信息。

## API

### `sortSectionsByZIndex()`

对所有区域实体进行排序。

- 基于它们的顶部 Y 坐标进行排序。
- 为了提高性能，此排序操作不会每帧都执行，而是每隔几秒更新一次，或者当区域数量发生变化时。

### `renderAllSectionsBackground(viewRectangle: Rectangle)`

渲染所有区域和传送门节点的背景。

- 遍历所有区域实体，绘制其底部颜色。
- 遍历所有传送门，渲染其黑色背景。
- 在渲染之前，会检查实体是否在当前视图矩形内。
- 内部会根据需要调用 `sortSectionsByZIndex()`。

### `renderAllSectionsBigTitle(viewRectangle: Rectangle)`

统一渲染所有区域的大标题。

- 根据 `Settings.sectionBitTitleRenderType` 的设置，决定标题的渲染方式（无、覆盖或顶部）。
- 从最深层（Y 轴最靠上）的区域开始渲染。
- 在渲染之前，会检查区域是否在当前视图矩形内。

### `renderAllEntities(viewRectangle: Rectangle)`

统一渲染所有实体。

- 返回实际渲染的实体数量。
- 首先遍历所有非区域和非涂鸦实体进行渲染。
- 接着遍历所有区域实体，绘制其顶部大文字。
- 最后遍历所有涂鸦实体进行渲染。
- 在渲染之前，会检查实体是否在当前视图矩形内。

### `renderEntity(entity: Entity)`

父渲染函数，根据实体类型分发到具体的渲染方法。

- 如果实体被区域折叠隐藏，则不进行渲染。
- 根据实体的具体类型（如 `Section`, `TextNode`, `ConnectPoint`, `ImageNode`, `UrlNode`, `PenStroke`, `PortalNode`, `SvgNode`），调用对应的子渲染器进行渲染。
- 当相机缩放比例大于 `Settings.ignoreTextNodeTextRenderLessThanCameraScale` 时，还会渲染实体的详细信息按钮。

### `renderEntityDetails(entity: Entity)`

渲染实体下方的注释（详细信息）。

- 如果实体有详细信息且未处于编辑状态，则根据 `Settings.alwaysShowDetails` 的设置决定是否渲染。
- 如果 `Settings.alwaysShowDetails` 为真，则始终渲染。
- 否则，仅当鼠标悬停在实体上时才渲染。

### `_renderEntityDetails(entity: Entity, limitLiens: number)`

私有方法，执行实体详细信息的实际多行文本渲染。

- 基于实体的碰撞框位置和大小计算渲染位置和宽度。
- 使用当前相机缩放比例调整字体大小。
- 应用当前舞台样式中的节点详细信息文本样式。

### `renderConnectPoint(connectPoint: ConnectPoint)`

渲染连接点。

- 如果连接点被选中，则在其外部增加一个选中框。
- 渲染连接点的圆形形状。
- 渲染连接点的详细信息。

### `renderImageNode(imageNode: ImageNode)`

渲染图像节点。

- 如果图像节点被选中，则在其外部增加一个选中框。
- 根据图像节点的加载状态（`loading`, `success`, `notFound`）显示不同的内容：
    - `loading`: 显示“loading...”文本。
    - `success`: 渲染实际的图像元素。
    - `notFound`: 显示“not found [attachmentId]”文本。
- 渲染图像节点的详细信息。

### `renderPenStroke(penStroke: PenStroke)`

渲染涂鸦笔画。

- 获取笔画颜色，如果透明则使用默认舞台对象边框颜色。
- 遍历笔画的片段列表，渲染每个片段。
- 如果鼠标悬停在笔画上，则渲染预选中碰撞框。
- 如果笔画被选中，则渲染选中碰撞框。
